<template>
  <div class="home">
    <HelloWorld />
    <SideBar class="sidebar" v-show="issidebar"/>
    <div class="sidebar-folding">
      <i class="el-icon-s-unfold" v-if="issidebar" @click="issidebar = false"></i>
      <i class="el-icon-s-fold" v-if="!issidebar" @click="issidebar = true"></i>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import SideBar from '@/components/sidebar.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,
    SideBar
  },
  data () {
    return {
      issidebar: true
    }
  }
}
</script>
<style lang="less" scoped>
.home{
  // width: 100%;
  display:flex;
  justify-content: space-between;
  padding: 10px;
  background-color: rgb(241, 241, 240);

}
.sidebar{
  position: fixed;
  top: 100px;
  right: 10px;
  padding: 15px;
  border-radius:10px;
  background-color:#f1f1f0;
}
.sidebar-folding{
  position: fixed;
  top: 30px;
  right: 0px;
  padding: 2px;
  cursor:pointer;
  background-color:#82c6e1;
  /deep/.el-icon-s-fold ,.el-icon-s-unfold{
    font-size: 22px;
  }
}
</style>
